<template>
  <div class="content-in">
    <div class="main">
      <h1>
        {{ $t('search.title')}}
        <span v-if="!!list.length">{{ $t('search.total')}}  {{ list.length }}  {{ $t('search.tiao')}}</span>
      </h1>
      <div class="banner">
        <el-input v-model="keyword" placeholder="请输入内容" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="goSearch"></el-button>
        </el-input>
      </div>
      <div v-loading="loading" class="news-scroll">
        <div v-for="item in list" :key="item.id" class="news-s-row" @click="handleTabChange(item)">
          <div class="img-box">
            <img :src="item.img" />
          </div>
          <div class="news-s-flex">
            <h1>
              {{ item[`title${capitalizeLang}`] }}
              {{ item[`subtitle${capitalizeLang}`] ? `|${item[`subtitle${capitalizeLang}`]}` : '' }}
            </h1>
            <p>{{ item[`desc${capitalizeLang}`] }}</p>
            <span>{{ item.createTime }}</span>
          </div>
          <div class="arrow-right"></div>
        </div>
        <span v-if="!list.length">{{ lang === 'en' ? 'empty' : '暂无数据' }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import * as api from '@/const/api'

export default {
  components: {},
  data() {
    return {
      keyword: '',
      list: [],
      loading: false,
    }
  },
  computed: {
    ...mapState(['lang']),
    ...mapGetters(['capitalizeLang']),
  },
  mounted() {
    this.keyword = this.$route.query.keyword || ''
    this.goSearch()
  },
  methods: {
    async goSearch() {
      try {
        this.list = []
        this.loading = true
        const { code, msg, data } = await this.$axios.$get(api.solutionContentSearch, {
          params: { words: this.keyword || '22' },
        })

        if (+code !== 200) {
          throw new Error(msg)
        }
        this.list = data.map((item) => {
          const obj = {
            ...item,
          }
          const content = JSON.parse(item.content)
          const isProduct = content[0].component === 'mult-picture'
          const isSolute = content.find((c) => c.component === 'tab-box')
          const isNews = content[0].component === 'mix-graphic-text'

          // 产品
          if (isProduct) {
            obj.titleZh = content[0].componentData.titleZh
            obj.titleEn = content[0].componentData.titleEn
            obj.subtitleZh = content[0].componentData.subtitleZh
            obj.subtitleEn = content[0].componentData.subtitleEn
            obj.descZh = content[0].componentData.descZh
            obj.descEn = content[0].componentData.descEn
            obj.img = content[0].componentData.pcImgZh
            obj.classificationType = 2
          }
          // 解决方案
          if (isSolute) {
            const soluteItem = isSolute.componentData.list.find((l) => l.url === item.id)
            obj.titleZh = soluteItem.titleZh
            obj.titleEn = soluteItem.titleEn
            obj.descZh = soluteItem.subtitleZh
            obj.descEn = soluteItem.subtitleEn
            obj.img = content[3].componentData.coverImage
            obj.classificationType = 1
          }
          // 新闻
          if (isNews) {
            const textlist = content[0].componentData.list.filter((f) => f.type === 'text')
            const imglist = content[0].componentData.list.filter((f) => f.type === 'image')
            obj.titleZh = content[0].componentData.titleZh
            obj.titleEn = content[0].componentData.titleEn
            obj.subtitleZh = content[0].componentData.sourceZh
            obj.subtitleEn = content[0].componentData.ssourceEn
            obj.descZh = textlist[0] ? textlist[0].content : ''
            obj.descEn = textlist[0] ? textlist[0].content : ''
            obj.img = imglist[0] ? imglist[0].content[0].response : ''
            obj.classificationType = 3
          }
          return obj
        })
      } catch (err) {
        this.$message.error(err.message)
      } finally {
        this.loading = false
      }
    },
    handleTabChange(item) {
      if (!item.id) {
        return
      }
      this.$router.push({
        path: '/solution',
        query: {
          id: item.id,
          type: item.classificationType,
          createTime: item.createTime,
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.content-in {
  .banner {
    display: flex;
    position: relative;
  }
  h1 {
    .mg(40, 0, 40, 0);

    span {
      .ft(18);
      color: #999;
      margin-left: 20px;
    }
  }
}

.main {
  .width(1200);

  margin: 0 auto;

  .news-scroll {
    .pd(40, 0, 40, 0);
  }

  .news-s-row {
    display: flex;
    justify-content: space-between;
    .pd(26, 20, 26, 20);

    cursor: pointer;

    .img-box {
      .width(280);
      .height(160);
      img {
        .maxWidth(280);
        .maxHeight(160);

        display: block;
        margin: 0 auto;
      }
    }

    .news-s-flex {
      flex: 1;
      position: relative;
      .mg(0, 60, 0, 60);

      h1 {
        .ft(22);
        .height(28);
        .mg(0, 0, 0, 0);

        color: #333;
      }

      p {
        .ft(16);
        .height(72);
        .mg(18, 0, 0, 0);
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      span {
        .ft(16);

        font-weight: 400;
        position: absolute;
        bottom: 0;
      }
    }

    .arrow-right {
      .width(36);
      .height(36);

      background: #efefef;
      border-radius: 50%;
      align-self: center;
      position: relative;

      &::before {
        .width(12);
        .height(12);
        .top(11);
        .left(9);

        content: '';
        display: block;
        position: absolute;
        transform: rotate(-135deg);
        border-left: 1px solid #cecece;
        border-bottom: 1px solid #cecece;
      }
    }

    &:hover {
      background: #f6f7f9;

      .arrow-right {
        background: #0762cb;

        &::before {
          border-left: 1px solid #fff;
          border-bottom: 1px solid #fff;
        }
      }
    }
  }
}
</style>
